<#import "../../layout/single.ftl" as layout>
<@layout.single title="模型管理" bodyClass="gray-bg" javascripts=["plugins/bootstrap-paginator.min.js","plugins/layui/layer/layer.js","plugins/steps/jquery.steps.js"] css=["css/plugins/steps/jquery.steps.css"]>
<div class="container-fluid">
    <div class="wrapper wrapper-content">
        <div class="col-sm-12 animated fadeInRight">
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-content" style="position: relative;">
                            <div class="btn-group" data-toggle="buttons">
                                <button class="btn btn-white" onclick="model.list(0);">所有</button>
                                <button class="btn btn-white" onclick="model.list(1);">未部署</button>
                                <button class="btn btn-white" onclick="model.list(2);">已部署</button>
                            </div>
                            <div style="position: absolute;right:16px;top:50%;transform: translateY(-50%);">
                                <a class="btn btn-primary" href="javascript:model.create();"><i
                                        class="anticon icon-plus"></i> 新增模型</a>
                            </div>
                            <div style="position: absolute;right:134px;top:50%;transform: translateY(-50%);">
                                <a class="btn btn-info" href="javascript:model.upload();"><i
                                        class="anticon icon-clouduploado"></i> 导入模型</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12" id="model-datas" style="margin-left: -15px;">

                </div>
            </div>
            <div class="row">
                <ul class="col-sm-12 left" id="pagination">

                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/template" id="model-datas-tmpl">
    <%if(models.length>0){%>
    <% for(var i = 0;i
    <models.length;i++){%>
    <div class="col-lg-3 col-sm-4">
        <div class="ibox" style="position: relative;">
            <div class="ibox-title" style="position: relative;">
                <h5>
                    <%=models[i].modelName%>
                </h5>
                &nbsp;&nbsp;
                <span class="badge">v<%=models[i].version?models[i].version:1%></span>
                <%if(models[i].deployId){%>
                <div style="position: absolute;right:16px;" class="label label-primary">
                    已部署
                </div>
                <%}else{%>
                <div style="position: absolute;right:16px;" class="label label-default">
                    未部署
                </div>
                <%}%>
            </div>
            <div class="ibox-content" style="min-height: 180px;">
                <div class="image">
                    <img alt="image" class="img-responsive"
                         src="${request.contextPath}/rest/models/<%=models[i].modelId%>/thumbnail"
                         onerror="this.style.display='none';">
                </div>
            </div>
            <div class="ibox-foot">
                <div class="row">
                    <div class="col-md-12" style="padding-left: 22px">
                        <p>
                            <strong>标识：</strong> <span class="label label-primary"><%=models[i].modelKey%></span>
                        </p>
                        <p>
                            <i class="glyphicon glyphicon-user"></i> <%=models[i].createUser%>&nbsp;&nbsp;
                            <i class="glyphicon glyphicon-time"></i> <%=models[i].createTimeStr%>
                        </p>
                    </div>
                </div>
            </div>
            <div class="ibox-button-modal hidden">
                <div class="top-button">
                    <a class="bpmn-view" data-id="<%=models[i].modelId%>">
                        <i class="anticon icon-eyeo"/>
                    </a>
                    <% if(!models[i].deployId){%>
                    <a class="bpmn-edit" data-id="<%=models[i].modelId%>">
                        <i class="anticon icon-edit"/>
                    </a>
                    <a class="bpmn-remove" data-id="<%=models[i].modelId%>">
                        <i class="anticon icon-delete"/>
                    </a>
                    <%}else{%>
                    <a class="bpmn-reject" data-id="<%=models[i].definitionId%>">
                        <i class="anticon icon-back"/>
                    </a>
                    <%}%>
                </div>
                <div class="row">
                    <% if(!models[i].deployId){%>
                    <div class="col-md-12 text-center ibox-button-main">
                        <button class="btn btn-primary btn-lg" onclick="model.deployById('<%=models[i].modelId%>')">
                            部 署
                        </button>
                    </div>
                    <%} else{%>
                    <div class="col-md-12 text-center ibox-button-main">
                        <button class="btn btn-info btn-lg text-center"
                                onclick="model.start('<%=models[i].definitionKey%>');">
                            启 动
                        </button>
                    </div>
                    <%}%>

                </div>
            </div>
        </div>
    </div>

    <%}%>
    <%}else{%>
    <div class="container-fluid">
        <div class="ibox ">
            <div class="ibox-content text-center">
                <h2>
                    <i class="glyphicon glyphicon-info-sign"></i>
                    暂无数据
                </h2>
            </div>
        </div>
    </div>
    <%}%>
</script>
<script>
    $(function () {
        model.list();

        $("#model-datas").on("mouseenter", ".ibox", function () {
            $(this).find(".ibox-button-modal").removeClass("hidden");
        }).on("mouseleave", ".ibox", function () {
            $(this).find(".ibox-button-modal").addClass("hidden");
        });
        var view_index = 0;
        $("#model-datas").on("click", "div.top-button a.bpmn-edit", function () {
            location.href = $ctx + "/activiti/editor/#/editor/" + $(this).attr("data-id");
        }).on("mouseenter", "div.top-button a.bpmn-edit", function () {
            layer.tips("编辑流程图", this, {
                tips: 1
            });
        }).on("mouseleave", "div.top-button a.bpmn-edit", function () {
            layer.close(layer.index);
        }).on("click", "div.top-button a.bpmn-view", function () {
            var url = $ctx + "/activiti/editor/#/processes/" + $(this).attr("data-id");
            Dialog.open(url, "查看流程图");
        }).on("mouseenter", "div.top-button a.bpmn-view", function () {
            view_index = layer.tips("查看流程图", this, {
                tips: 1
            });
        }).on("mouseleave", "div.top-button a.bpmn-view", function () {
            layer.close(view_index);
        }).on("click", "div.top-button a.bpmn-remove", function () {
            var _modelId = $(this).attr("data-id");
            model.delete(_modelId);
        }).on("mouseenter", "div.top-button a.bpmn-remove", function () {
            view_index = layer.tips("删除流程图", this, {
                tips: 1
            });
        }).on("mouseleave", "div.top-button a.bpmn-remove", function () {
            layer.close(view_index);
        }).on("click", "div.top-button a.bpmn-reject", function () {
            var _definitionId = $(this).attr("data-id");
            model.revoke(_definitionId);
        }).on("mouseenter", "div.top-button a.bpmn-reject", function () {
            view_index = layer.tips("撤销流程图", this, {
                tips: 1
            });
        }).on("mouseleave", "div.top-button a.bpmn-reject", function () {
            layer.close(view_index);
        })
    });
</script>
</@layout.single>
